<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改出库单')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <script src="/js/jquery.min.js"></script>
    <link href="/js/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css" />
    <script src="/js/tagit/jquery-ui.min.js"></script>
    <script src="/js/tagit/tag-it.js"></script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-chuku-edit" th:object="${xiaoshouchuku}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">出库单号
                ：</label>
            <div class="col-sm-8">
                <input name="chukudanhao" th:field="*{chukudanhao}" class="form-control"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">下单日期
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="xiadanriqi"
                           th:value="${#dates.format(xiaoshouchuku.xiadanriqi, 'yyyy-MM-dd HH:mm:ss')}"
                           class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">项目名称
                ：</label>
            <div class="col-sm-8">
                <input name="xiangmumingcheng" th:field="*{xiangmumingcheng}" class="form-control"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">业务员
                ：</label>
            <div class="col-sm-8">
                <input name="yewuyuan" th:field="*{yewuyuan}" class="form-control" list="userList"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">发货人
                ：</label>
            <div class="col-sm-8">
<!--                <input name="fahuoren" th:field="*{fahuoren}" class="form-control" list="userList"-->
<!--                       type="text">-->
                <input id="myULTags" style="display: none;" th:field="*{fahuoren}" name="fahuoren" class="form-control" type="text">
                <datalist id="userList" th:with="type=${@vpaibanMapper.selectUser()}">
                    <option th:each="lists : ${type}"
                            th:text="${lists.getUsername()}"
                            th:value="${lists.getUsername()}"></option>
                </datalist>
                <script>
                    $('#myULTags').tagit({
                        availableTags: [],
                        itemName: 'item',
                        fieldName: 'tag'
                    });
                    $("li").find("input").attr("list","userList")
                </script>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">收货地址
                ：</label>
            <div class="col-sm-8">
                <input name="shouhuodizhi" th:field="*{shouhuodizhi}" class="form-control"
                       type="text">
            </div>
        </div>
        <!--                        <div class="form-group">-->
        <!--                            <label class="col-sm-3 control-label">门扇配套-->
        <!--                                ：</label>-->
        <!--                            <div class="col-sm-8">-->
        <!--                                <input name="menshanpeitao" th:field="*{menshanpeitao}" class="form-control"-->
        <!--                                       type="text">-->
        <!--                            </div>-->
        <!--                        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">五金配套
                ：</label>
            <div class="col-sm-8">
                <!--                                <input name="wujinpeitao" th:field="*{wujinpeitao}" class="form-control"-->
                <!--                                       type="text">-->
                <select id="wujinpeitao" name="wujinpeitao" th:field="*{wujinpeitao}" onchange="valueChangeWujin(this.value)" class="form-control">
                    <option value="常规五金配套">常规五金配套</option>
                    <option value="单要防火锁">单要防火锁</option>
                    <option value="单要闭门器">单要闭门器</option>
                    <option value="单要拉爆盖">单要拉爆盖</option>
                    <option value="不含五金">不含五金</option>
                </select>
                <script>
                    window.addEventListener('DOMContentLoaded', (event) => {
                        valueChangeWujin(document.getElementById("wujinpeitao").value)
                    });
                    var wujinCheck = 0;

                    function valueChangeWujin(value) {
                        //五金与门扇的比例是1；1；6，宽度超过1000后是1；2；6

                        switch (value) {
                            case '常规五金配套':
                                wujinCheck = 1
                                break
                            case '单要防火锁':
                                wujinCheck = 2
                                break
                            case '单要闭门器':
                                wujinCheck = 3
                                break
                            case '单要拉爆盖':
                                wujinCheck = 4
                                break
                            case '不含五金':
                                wujinCheck = 5
                                break
                            default:
                                break
                        }
                        // document.getElementById("zongjine").value = zongjine
                    }
                </script>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注
                ：</label>
            <div class="col-sm-8">
                <input name="beizhu" th:field="*{beizhu}" class="form-control"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="table-box">
                    <div id="toolbar">
                        <a id="addRow" onclick="addRow()">添加行</a>
                        <a id="removeRow" onclick="removeRow()">删除行</a>
                        <div hidden>
                            <label for="shangpinbianhao"></label>
                            <input name="shangpinbianhao" th:field="*{shangpinbianhao}" id="shangpinbianhao" hidden type="text">
                        </div>
                    </div>
                    <datalist id="shangpinlist" th:with="type=${@shangpinguanliMapper.selectShangpingList()}">
                        <option th:each="lists : ${type}"
                                th:text="${lists.getShangpinming()+'|'+lists.getShangpinguigekuan()+'*'+lists.getShangpinguigegao()+'|'+lists.getShangpinkaixiang()}"
                                th:value="${lists.getShangpinbianhao()}"></option>
                    </datalist>
                    <div style="overflow: scroll;">
                        <table id="bootstrap-table" style="min-width: 1000px;overflow-x: scroll">
                        </table>
                    </div>
                </div>
                <script th:inline="javascript">
                    $(function () {
                        var options = {
                            showToggle: false,
                            showSearch: false,
                            cardView: false,
                            showColumns: false,
                            showPaginationSwitch: false,     //显示切换分页按钮
                            showRefresh: false,      //显示刷新按钮
                            pagination: false,
                            columns: [{
                                checkbox: true
                            },
                                {
                                    field: 'shangpinming',
                                    title: '商品名',
                                    align: "center",
                                    width: "200px",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shangpinming' placeholder='商品名' list='shangpinlist'" +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "' onblur='getValuesName(" + index + ")'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                }, {
                                    field: 'shangpinbianhao',
                                    title: '商品编号',
                                    align: "center",
                                    visible: false,
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shangpinbianhao' placeholder='商品编号' " +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shengchanchangshang',
                                    title: '生产厂商',
                                    align: "center",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input readonly id='" + index + "shengchanchangshang' placeholder='生产厂商' " +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shangpinleibie',
                                    title: '商品类别',
                                    align: "center",
                                    width: "150px",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input readonly id='" + index + "shangpinleibie' placeholder='商品类别' " +
                                            "class='form-control'  value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shangpinguigekuan',
                                    title: '规格宽',
                                    align: "center",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<div style='display: flex;align-items: center'><input id='" + index + "shangpinguigekuan' placeholder='规格宽' " +
                                            "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'></div>");
                                        return action.join('');
                                    }
                                },
                                {
                                    field: 'shangpinguigegao',
                                    title: '规格高',
                                    align: "center",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<div style='display: flex;align-items: center'><input id='" + index + "shangpinguigegao' placeholder='规格高' " +
                                            "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'></div>")
                                        return action.join('');
                                    }
                                },
                                {
                                    field: 'shangpinkaixiang',
                                    title: '开向',
                                    align: "center",
                                    width: "100px",
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinkaixiang' placeholder='开向' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'shangpinshuliang',
                                    title: '数量',
                                    align: "center",
                                    width: "100px",
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinshuliang' placeholder='商品数量' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'shangpinshoujia',
                                    title: '售价',
                                    align: "center",
                                    width: "100px",
                                    // visible: false,
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinshoujia' placeholder='商品售价' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'shengchanchangshang',
                                    title: '生产厂商',
                                    align: "center",
                                    width: "200px",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shengchanchangshang' placeholder='生产厂商' " +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },{
                                    field: 'index',
                                    title: '序列',
                                    align: "center",
                                    width: '20px',
                                    // visible: false,
                                    formatter: function (value, row, index) {
                                        return row.index = index + 1; //返回行号
                                    }
                                },
                            ]
                        };
                        $.table.init(options);
                        chushihua()
                    })

                    function chushihua() {
                        var jsonStr = $("#shangpinbianhao").val();
                        // console.log(jsonStr)
                        let list = JSON.parse(jsonStr)
                        // let list = $("#shangpin").val();
                        console.log(list)
                        for (let i = 0; i < list.length; i++) {
                            const row =
                                {
                                    "shangpinming": list[i]["shangpinming"],
                                    "shangpinbianhao": list[i]["shangpinbianhao"],
                                    "shengchanchangshang": list[i]["shengchanchangshang"],
                                    "shangpinleibie": list[i]["shangpinleibie"],
                                    "shangpinguigekuan": list[i]["shangpinguigekuan"],
                                    "shangpinguigegao": list[i]["shangpinguigegao"],
                                    "shangpinkaixiang": list[i]["shangpinkaixiang"],
                                    "shangpinshuliang": list[i]["shangpinshuliang"],
                                    "shangpinshoujia": list[i]["shangpinshoujia"]
                                };
                            console.log(list[i]["shangpinming"])

                            $('#bootstrap-table').bootstrapTable('append', row);
                            //更新行数据
                            $('#bootstrap-table').bootstrapTable('updateRow', row);
                            //定位到最后一行
                            $('#bootstrap-table').bootstrapTable('scrollTo', 'bottom');
                        }
                    }

                    //添加行
                    function addRow() {
                        var row =
                            {
                                "shangpinming": "",
                                "shangpinbianhao": "",
                                "shengchanchangshang": "",
                                "shangpinleibie": "",
                                "shangpinguigekuan": 0,
                                "shangpinguigegao": 0,
                                "shangpinkaixiang": "",
                                "shangpinshuliang": 0,
                                "shangpinshoujia": 0
                            };
                        //append  追加到最后一行
                        //prepend  新增到第一行
                        $('#bootstrap-table').bootstrapTable('append', row);
                        //更新行数据
                        $('#bootstrap-table').bootstrapTable('updateRow', row);
                        //定位到最后一行
                        $('#bootstrap-table').bootstrapTable('scrollTo', 'bottom');
                    }

                    function getValues(index) {
                        const rows = $('#bootstrap-table').bootstrapTable('getData');
                        let zongjine = 0;
                        $.each(rows, function (i, row) {
                            if (row.index === (index + 1)) {
                                row.shangpinleibie = $("#" + index + "shangpinleibie").val();
                                row.shengchanchangshang = $("#"+index+"shangpinbianhao").val();
                                row.shangpinguigekuan = $("#" + index + "shangpinguigekuan").val();
                                row.shangpinguigegao = $("#" + index + "shangpinguigegao").val();
                                row.shangpinkaixiang = $("#" + index + "shangpinkaixiang").val();
                                row.shangpinshuliang = $("#" + index + "shangpinshuliang").val();
                                row.shangpinshoujia = $("#" + index + "shangpinshoujia").val();
                                $('#bootstrap-table').bootstrapTable('updateRow', row);

                                document.getElementById('shangpinbianhao').value = JSON.stringify(rows)
                                // return false;
                            }
                            zongjine += Number(row.shangpinshuliang) * row.shangpinshoujia
                        });
                        document.getElementById("zongjine").value = zongjine
                    }

                    function getValuesName(index) {
                        // console.log(index)
                        var rows = $('#bootstrap-table').bootstrapTable('getData');
                        var rowRemove = []
                        $.each(rows, function (i, row) {
                            if (row.index === (index + 1)) {
                                // console.log()
                                // rowRemove[0] = row.index
                                rowRemove.push(row.index)
                                console.log(row)
                                var msgStr = $("#" + index + "shangpinming").val()
                                var data = [];
                                $.ajax({
                                    type: "POST",
                                    datatype: "string",
                                    url: "/api/shangPinTianJia",
                                    data: {
                                        "danhao": msgStr,
                                        "wujinSet": wujinCheck
                                    },
                                    async: false,
                                    success: function (result) {
                                        if (result !== null) {
                                            data = result
                                        }
                                    }
                                });
                                var zongjine = 0;
                                var teshu = data[0].shangpinguigekuan > 1000 ? 2 : 1;

                                for (let j = 0; j < data.length; j++) {
                                    var rowNew = [];
                                    var check = false;
                                    rows.forEach((row) => {
                                        if (row.shangpinbianhao == data[j]["shangpinbianhao"]) {
                                            check = true
                                            if (row.shangpinming == "闭门器") {
                                                row.shangpinshuliang = Number(row.shangpinshuliang) + Number(teshu)
                                            }
                                            if (row.shangpinming == "拉爆盖") {
                                                row.shangpinshuliang = Number(row.shangpinshuliang) + Number(6)
                                            }
                                            row.shangpinshuliang = Number(row.shangpinshuliang) + Number(1)

                                            zongjine = zongjine + (Number(row.shangpinshuliang) * Number(row.shangpinshoujia))

                                            $('#bootstrap-table').bootstrapTable('updateRow', row);

                                        }
                                    })
                                    if (!check) {
                                        rowNew =
                                            {
                                                "shangpinming": data[j]["shangpinming"] !== null ? data[j]["shangpinming"] : undefined,
                                                "shangpinbianhao": data[j]["shangpinbianhao"] !== null ? data[j]["shangpinbianhao"] : undefined,
                                                "shengchanchangshang": data[j]["shengchanchangshang"] !== null ? data[j]["shengchanchangshang"] : undefined,
                                                "shangpinleibie": data[j]["shangpinleibie"] !== null ? data[j]["shangpinleibie"] : undefined,
                                                "shangpinguigekuan": data[j]["shangpinguigekuan"],
                                                "shangpinguigegao": data[j]["shangpinguigegao"],
                                                "shangpinkaixiang": data[j]["shangpinkaixiang"] !== null ? data[j]["shangpinkaixiang"] : undefined,
                                                "shangpinshuliang": 1,
                                                "shangpinshoujia": data[j]["shangpinshoujia"]
                                            };
                                        if (rowNew.shangpinming == "闭门器") {
                                            rowNew.shangpinshuliang = Number(teshu)
                                        }
                                        if (rowNew.shangpinming == "拉爆盖") {
                                            rowNew.shangpinshuliang = Number(6)
                                        }
                                        //append  追加到最后一行
                                        //prepend  新增到第一行
                                        $('#bootstrap-table').bootstrapTable('append', rowNew);
                                        //更新行数据
                                        $('#bootstrap-table').bootstrapTable('updateRow', rowNew);
                                        //定位到最后一行
                                        $('#bootstrap-table').bootstrapTable('scrollTo', 'bottom');

                                        zongjine = Number(zongjine) + (Number(rowNew.shangpinshuliang) * Number(rowNew.shangpinshoujia))
                                    }
                                }

                                document.getElementById('zongjine').value = zongjine + Number(document.getElementById('zongjine').value);

                                return false;
                            }
                        });


                        $('#bootstrap-table').bootstrapTable('remove', {
                            field: 'index',
                            values: rowRemove
                        });

                        document.getElementById('shangpinbianhao').value = JSON.stringify($('#bootstrap-table').bootstrapTable('getData'))
                    }

                    function removeRow() {
                        var rows = $('#bootstrap-table').bootstrapTable('getSelections');//获取选中行
                        if (rows.length === 0) {
                            layer.msg("请选择要删除的数据");
                            return;
                        }
                        var indexs = [];
                        let zongjine = 0;
                        for (var i = 0; i < rows.length; i++) {
                            indexs[i] = rows[i].index;
                            zongjine += rows[i].shangpinshuliang * Number(rows[i].shangpinshoujia)
                        }
//删除
                        $('#bootstrap-table').bootstrapTable('remove', {
                            field: 'index',
                            values: indexs
                        });
                        document.getElementById("zongjine").value = Number($('#zongjine').val()) - zongjine
                        document.getElementById('shangpinbianhao').value = JSON.stringify($('#bootstrap-table').bootstrapTable('getData'))
                    }
                </script>
            </div>
            <div class="col-sm-4"></div>
            <label class="col-sm-4 control-label"
                   style="text-align: center;font-weight: bold;font-size: large"></label>
            <div class="col-sm-4">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">总金额
                ：</label>
            <div class="col-sm-8">
                <input name="zongjine" th:field="*{zongjine}" class="form-control"
                       type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "jinchuguanli/chuku";
    $("#form-chuku-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-chuku-edit').serialize());
        }
    }

    $("input[name='xiadanriqi']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='fahuoriqi']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
<script>
    var a = 0
    window.onload = function () {
        while (a<1000){
            var element = $("span[role='status']")
            if (element){
                element.remove()
            }
            a++
            time.Sleep(5000)
        }
    }
</script>
</body>
</html>